<!-- 系统时间 -->
<template>
    <div class="main-header">
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span class="title">系统时间</span>
                <el-button style="float: right; padding:4px 8px;" type="primary" @click="timeClick(1)">确定</el-button>
            </div>
            <div>
                <el-form :model="timeForm" ref="timeForm" label-width="40%">
                    <el-row :gutter="24">
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="日期：">
                                <el-date-picker size="small" v-model="timeForm.Date" type="date"
                                    value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="时间：">
                                <el-time-picker size="small" value-format="HH:mm:ss" format="HH:mm:ss"
                                    v-model="timeForm.Time" placeholder="请选择时间"></el-time-picker>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item  label="时区：">
                                <el-select size="small" v-model="timeForm.TimeZone" placeholder="请选择时区">
                                    <el-option label="(UTC+12)新西兰、奥克兰、惠灵顿、斐济、新西兰、瑙鲁" :value="12" />
                                    <el-option label="(UTC+11)所罗门群岛、库页岛" :value="11" />
                                    <el-option label="(UTC+10)澳大利亚、海参崴、关岛、堪培拉、墨尔本、悉尼" :value="10" />
                                    <el-option label="(UTC+09)日本、韩国、东京、首尔、札幌、大阪、东帝汶" :value="9" />
                                    <el-option label="(UTC+08)中国、马来西亚、菲律宾、新加坡、香港、澳门" :value="8" />
                                    <el-option label="(UTC+07)泰国、曼谷、河内、雅加达" :value="7" />
                                    <el-option label="(UTC+06)新西伯利亚、吉尔吉斯斯坦、孟加拉国、不丹" :value="6" />
                                    <el-option label="(UTC+05)巴基斯坦、土库曼斯坦、马尔代夫" :value="5" />
                                    <el-option label="(UTC+04)阿布扎比、第比利斯、迪拜、毛里求斯、路易港" :value="4" />
                                    <el-option label="(UTC+03)非洲东部、俄罗斯、巴格达、科威特、莫斯科、圣彼得堡" :value="3" />
                                    <el-option label="(UTC+02)欧洲东部、非洲中部、土耳其、以色列、南非" :value="2" />
                                    <el-option label="(UTC+01)欧洲中部、西非、中非西部、德国、意大利、法国、马德里、西班牙" :value="1" />
                                    <el-option label="(UTC/GMT)协调世界时、格林威治时间、英国、里斯本、托尔斯港" :value="0" />
                                    <el-option label="(UTC-01)佛得角、亚速尔群岛" :value="-1" />
                                    <el-option label="(UTC-02)南乔治亚岛、费尔南多-迪诺罗尼亚岛" :value="-2" />
                                    <el-option label="(UTC-03)巴西、圣地亚哥、萨尔瓦多、巴西利亚、乌拉圭、阿根廷、苏里南" :value="-3" />
                                    <el-option label="(UTC-04)委内瑞拉、玻利维亚、巴拉圭、智利" :value="-4" />
                                    <el-option label="(UTC-05)东部时间(美国和加拿大)、厄瓜多尔、秘鲁、古巴" :value="-5" />
                                    <el-option label="(UTC-06)美国和加拿大中部时间、蒙特雷、休斯顿、孟菲斯" :value="-6" />
                                    <el-option label="(UTC-07)山地时间、亚利桑那、马萨特兰、凤凰城、盐湖城、丹佛、埃德蒙顿" :value="-7" />
                                    <el-option label="(UTC-08)太平洋时间、洛杉矶、旧金山、温哥华、西雅图、拉斯维加斯" :value="-8" />
                                    <el-option label="(UTC-09)阿拉斯加" :value="-9" />
                                    <el-option label="(UTC-10)夏威夷" :value="-10" />
                                    <el-option label="(UTC-11)萨摩亚、纽埃岛" :value="-11" />
                                    <el-option label="(UTC-12)国际日期变更线以西" :value="-12" />
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                    </el-row>
                </el-form>
            </div>
        </el-card>

        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span class="sign">I</span>
                <span>时间同步</span>
                <el-button style="float: right; padding:4px 8px;" type="primary"
                    @click="confirmClick('syncForm')">确定</el-button>
            </div>
            <div>
                <el-form :model="syncForm" :rules="rules" ref="syncForm" label-width="40%">
                    <el-row :gutter="24">
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="时间同步：" prop="NtpState">
                                <el-switch v-model="syncForm.NtpState" :active-value="1" @change='stateClick'
                                    :inactive-value="0"></el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="NTP服务器：" prop="NtpServer" v-if='syncForm.NtpState === 1'>
                                <el-input size="small" v-model="syncForm.NtpServer" placeholder="请输入NTP服务器"
                                    :disabled="syncForm.NtpState === 0"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="24" :md="24" :lg="24">
                            <el-form-item label="同步周期：" prop="NtpInterval" v-if='syncForm.NtpState === 1'>
                                <el-input type="number" :disabled="syncForm.NtpState === 0" @mousewheel.native.prevent
                                    size="small" v-model.number="syncForm.NtpInterval" placeholder="请输入同步周期"><span
                                        slot="append">分</span></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import { GetNtpConfig, SetNtpConfig, SetSystemTimeAndZone, GetSystemTimeAndZone } from '@/api/firstPage';
export default {
    data() {
        var validateSpace = (rule, value, callback) => {
            if (value == null || value == '') {
                callback(new Error('请输入NTP服务器'))
            } else if (value.indexOf(' ') != -1) {
                callback(new Error('NTP服务器不允许输入空格'))
            } else {
                callback();
            }
        }
        return {
            timeForm: { //系统时间表单
                Date: '',
                Time: '',
                TimeZone: 8 //默认时区北京时间
            },
            syncForm: { // 时间同步表单
                NtpState: 0, //时间同步
                NtpServer: '', //NTP服务器
                NtpInterval: '' //同步周期
            },
            rules: {
                NtpState: { required: false, message: '', trigger: 'change' },
                NtpServer: { required: true, validator: validateSpace, trigger: 'change' },
                NtpInterval: { required: true, message: '请输入同步周期', trigger: 'blur' },
            }
        }
    },
    created() {
        this.getData();
        this.getTime();
    },
    methods: {
        // 获取时间同步表单数据
        async getData() {
            const paramData = {
                Header: {
                    CmdCode: "GetNtpConfig",
                },
                Token: this.$store.state.user.Token
            };
            const res = await GetNtpConfig(paramData);
            if (res.Status.StatusCode === 0) {
                this.syncForm = res.Data
            }
        },
        // 获取系统时间表单数据
        async getTime() {
            const paramData = {
                Header: {
                    CmdCode: "GetSystemTimeAndZone",
                },
                Token: this.$store.state.user.Token
            };
            const res = await GetSystemTimeAndZone(paramData);
            if (res.Status.StatusCode === 0) {
                this.timeForm = res.Data
            }
        },
        // 提交时间同步
        async confirmClick(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const paramData = {
                        Header: {
                            CmdCode: "SetNtpConfig",
                        },
                        Data: this.syncForm,
                        Token: this.$store.state.user.Token
                    };
                    const res = await SetNtpConfig(paramData);
                    if (res.Status.StatusCode === 0) {
                        this.$message.success('更改成功');
                        this.getData();
                    }
                } else {
                    return false;
                }
            });
        },
        // 修改系统时间配置
        async timeClick(status) {
            if (status === 1) {
                const paramData = {
                    Header: {
                        CmdCode: "SetSystemTimeAndZone",
                    },
                    Data: this.timeForm,
                    Token: this.$store.state.user.Token
                };
                const res = await SetSystemTimeAndZone(paramData);
                if (res.Status.StatusCode === 0) {
                    // 成功将返回值存进store里面，用于实时同步顶部导航栏时间
                    this.$store.commit('user/SET_DATETIME', this.timeForm.Date + ' ' + this.timeForm.Time);
                    this.$message.success('更改成功');
                    this.getTime();
                }
            }
        },
        // 数据服务中心状态切换判断
        stateClick(val) {
            // 值为0时初始化表单
            if (val === 0) {
                this.$nextTick(() => {
                    this.$refs["syncForm"].clearValidate();
                });
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.text {
    font-size: 14px;
}

.box-card {
    // margin: 16px;
    margin-bottom: 16px !important;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

>>>.el-input--small {
    width: 40% !important;

}

>>>.el-select--small {
    width: 40% !important;

    .el-input--small {
        width: 100% !important;
    }
}

>>>.el-card__header {
    padding: 10px !important;
}

.el-form-item {
    margin-bottom: 10px !important;
}
</style>